<style lang="less">
.swipe-item-wrapper {
  height: 100%;
  position: relative;
  overflow: hidden;
  margin-top: 2rpx;
  .swipe-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 140rpx;
    position: absolute;
    top: 0;
    z-index: 1;
    &.actions-left {
      left: 0;
    }
    &.actions-right {
      right: 0;
    }
  }
  .swipe-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    padding: 0 18rpx;
    background-color: white;
    .swipe-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 30rpx;
      color: #666;
    }
  }
  .swipe-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: white;
    &.del {
      background-color: rgb(244, 51, 60);
    }
    &.edit {
      background-color: rgb(16, 142, 233);
    }
  }
}

</style>
<template>
  <view class="swipe-item-wrapper">
    <view class="swipe-content" style="left:{{swipeData.style === 0 || swipeData.style=='undefined'? '0' : swipeData.style + 'rpx'}}" @touchstart="ts" @touchmove="tm" @touchend="te">
      <slot></slot>
    </view>
    <view class="swipe-actions actions-right">
      <view class="swipe-btn del" @tap.stop="handleRightBtnTap({{swipeData}})">删除</view>
    </view>
  </view>
</template>
<script>
import wepy from 'wepy'

export default class Counter extends wepy.component {
  props = {
    swipeData: {
      type: Object,
      default: []
    }
  }

  data = {
    startX: null,
    moveX: null
  }

  onLoad() {
    if (this.swipeData) {
      this.swipeData.style = 0;
    }
  }

  methods = {
    ts(e) {
      if (e.touches.length === 1) {
        this.startX = e.touches[0].clientX
        this.moveX = e.touches[0].clientX
      }
    },
    tm(e) {
      if (e.touches.length === 1) {
        // 手指起始点位置与移动期间的差值
        var distanceX = this.moveX - e.touches[0].clientX
        this.moveX = e.touches[0].clientX

        if ((this.swipeData.style - distanceX) < -140) {
          this.swipeData.style = -140
        } else if ((this.swipeData.style - distanceX) > 0) {
          this.swipeData.style = 0
        } else {
          this.swipeData.style = this.swipeData.style - distanceX
        }
        this.setData({
          swipeData: this.props.swipeData
        })
      }
    },

    te(e) {
      if (e.changedTouches.length === 1) {
        if (this.swipeData.style <= -70) {
          this.swipeData.style = -140
        } else {
          this.swipeData.style = 0
        }
        this.setData({
          swipeData: this.props.swipeData
        })
      }
    },
    handleRightBtnTap(item) {
      item = JSON.parse(JSON.stringify(item))
      delete item.style
      this.$emit('delItem', item)
    }
  }
}

</script>
